<template>
	<view class="" style="padding: 0;">
		<view class="">
			<navBar :bgcolor="'#F5F7F8'" :title="'附近技师'">
				<view slot="right">
					<image @click="istype = !istype" v-if="istype" style="width: 30rpx;height: 30rpx;" src="https://qiniu-cdn.maeiyun.com/imgs/massage/shai-1.png" mode=""></image>
					<image @click="istype = !istype" v-else style="width: 35rpx;height: 30rpx;" :src="$util.imgurl('imgs/massage/style.png')" mode=""></image>
				</view>
			</navBar>
		</view>
		<mescroll-body :sticky="true" :down="down" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="" v-if="istype">
				<view class="massagist-list">
					<view class="horizontal-list">
						<view class="goods--box">
							<view class="goods--item" style="position: relative;" v-for="(item, index) in massageList" :key="index" @click="toDetail(item)">
								<image v-if="item.is_data == 2" click="right-fixed-img" style="width: 58rpx;height: 58rpx;position: absolute;right: 0;top: 0;" src="https://qiniu-cdn.maeiyun.com/imgs/index/tuijian.png" mode=""></image>
								<view class="item--cover" :style="{backgroundImage: 'url(' + item.work_clothes_image + ')'}"></view>
								<view class="item--content">
									<view class="title">{{item.technician_nickname || item.real_name}} <text>{{item.age}}</text></view>
									
									<view class="block flex_r_between">
										<view class="shop-lines">
											<uni-icons custom-prefix="iconfont" type="icon-dianpu1" color="#333" size="12"></uni-icons>
											<view class="hidden" style="margin-left: 10rpx;">{{item.store_name}}</view>
										</view>
										<!-- <view class="time-content">
											<view>今日可约</view>
										</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box-content" v-else>
				<view class="technician-list">
					<view @click="toDetail(item)" class="every-technician-info "
						v-for="(item,index) in massageList" :key="index" style="position: relative;">
						<image v-if="item.is_data == 2" click="right-fixed-img" style="width: 58rpx;height: 58rpx;position: absolute;right: 0;top: 0;" src="https://qiniu-cdn.maeiyun.com/imgs/index/tuijian.png" mode=""></image>
						<view class="left-show">
							<view class="technician-img">
								<image class="header-img" :src="item.work_clothes_image" mode="aspectFill"></image>
							</view>
						</view>
						<view class="right-show">
							<view class="fixed-loc">
								<image src="/static/jishi/loc.png" mode=""></image>
								<view>{{(item.juli / 1000).toFixed(2)}}km</view>
							</view>
							<view class="username">{{item.technician_nickname || item.real_name}} <text>{{item.age}}</text></view>
							<view class="shop-lines">
								<uni-icons custom-prefix="iconfont" type="icon-dianpu1" color="#333" size="12"></uni-icons>
								<view style="margin-left: 10rpx;">{{item.store_name}}</view>
							</view>
							<view class="start-nums">
								<uni-rate :readonly="true" activeColor="#EF5233" :size="14" :max="5" :value="item.star" />
								<view class="pingjia-nums">
									<text>评论{{item.opinion}}</text>
									<text>好评{{Number((item.high_opinion/item.opinion || 0)*100).toFixed(0)}}%</text>
								</view>
							</view>
							<view class="technician-datum-list">
								<view class="item-datum">
									<view class="titles">籍贯</view>
									<view class="desc">{{item.city}}</view>
								</view>
								<view class="item-datum">
									<view class="titles">星座</view>
									<view class="desc">{{item.constellation}}</view>
								</view>
								<view class="item-datum">
									<view class="titles">性别</view>
									<view class="desc">{{item.gender == 1?'男':'女'}}</view>
								</view>
								<view class="item-datum">
									<view class="titles">民族</view>
									<view class="desc">{{item.nation}}</view>
								</view>
								<view class="item-datum">
									<view class="titles">工龄</view>
									<view class="desc">{{item.experience}}年</view>
								</view>
								<view class="item-datum">
									<view class="titles">手法</view>
									<view class="desc">{{item.star}}星</view>
								</view>
								<view class="item-datum">
									<view class="titles">身高</view>
									<view class="desc">{{item.height}}cm</view>
								</view>
								<view class="item-datum">
									<view class="titles">体重</view>
									<view class="desc">{{item.weight}}kg</view>
								</view>
							</view>
					
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { mapState } from 'vuex'//引入mapState
	export default {
		mixins: [MescrollMixin],
		computed: {
			  ...mapState({'userLocation':'userLocation'}),
		},
		data() {
			return {
				current: 0,
				massageType: [],
				isStyle: false,
				sort: 0,
				bannerDate: {},
				massageResultData: {},
				page: 1,
				massageList: [],
				down: {
					auto: false
				},
				istype:1,
				username:""
			}
		},
		onLoad(option) {
			this.username = option.key
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			toDetail(item){
				if(item.is_data == 1){
					uni.navigateTo({
						url:'/otherpages/technician/technician?id='+item.id+'&juli='+item.juli
					})
				}else{
					uni.navigateTo({
						url:'/otherpages/technician/technician?id='+item.id
					})
				}
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.page = 1
				this.massageList = []
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianByService",
					method: "get"
				}, {
					service_id:this.id?this.id:'',
					page: page.num,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
					key:this.username?this.username:''
				}).then(res => {
					if (res.code == 0) {
						that.massageList = [...that.massageList, ...res.data.data]
						// that.mescroll.endSuccess(that.massageList.length)
						that.mescroll.endSuccess(that.massageList.length,that.massageList.length >= res.data.total?false:true)
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			},
			getCate() {
				var that = this
				this.request.httpTokenRequest({
					url: "service/category",
					method: "get"
				}).then(function(data) {
					if (data.code == 0) {
						that.massageType = data.data
					} else {

					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	// 竖排样式
	$padding: 30rpx;
	$margin: 10rpx;
	$radius: 20rpx;
	
	.goods--box {
		display: flex;
		flex-wrap: wrap;
		padding: $padding/3;
	
		.goods--item {
			background: white;
			width: calc(50% - #{$margin*2});
			background: white;
			border-radius: $radius;
			overflow: hidden;
			margin: $margin;
	
			.item--cover {
				width: 100%;
				padding-top: 140%;
				background-position: center;
				background-size: cover;
			}
			.time-content {
				// width: 186rpx;
				padding: 3rpx 10rpx;
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				height: 32rpx;
				line-height: normal;
				display: table;
				text-align: center;
				background: #EF5233;
				border-radius: 8rpx;
			}
			.item--content {
				padding: 20rpx;
	
				&>.title {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #363737;
					line-height: 40rpx;
					// margin-bottom: 10rpx;
					text{
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #959595;
						margin-left: 9rpx;
					}
				}
				.shop-lines{
					display: flex;
					align-items: baseline;
					color: #888889;
					font-size: 24rpx;
					margin-bottom: 10rpx;
					max-width: 180rpx;
					view {
						flex: 1;
					}
				}
				&>.price {
					display: flex;
					align-items: center;
					line-height: 40rpx;
					font-weight: bold;
					color: #d4282d;
					font-size: 28rpx;
					line-height: 42rpx;
					view{
						font-size: 18rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #EC2700;
						line-height: 25rpx
					}
				}
			}
		}
	}
	///
	
	///
	
	///
	//
	.technician-list {
		// margin-top: 30rpx;
		padding-bottom: 100rpx;
	}	
	.every-technician-info {
		height: 320rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 0 31rpx;
		position: relative;
		margin-bottom: 30rpx;
		.left-show {
			position: absolute;
			left: 24rpx;
			top: 30rpx;
	
			.technician-img {
				width: 160rpx;
				height: 200rpx;
				position: relative;
	
				.header-img {
					width: 160rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
	
				.fangda-icon {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
	
			}
	
			.choose-style {
				width: 118rpx;
				height: 30rpx;
				margin: 0 auto;
				margin-top: 30rpx;
	
				.no-choose {
					width: 115rpx;
					height: 30rpx;
					background: url('../../static/jishi/nochoose.png')no-repeat;
					background-size: 100% 100%;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					padding-left: 17rpx;
					line-height: 30rpx;
				}
	
				.choose {
					width: 115rpx;
					height: 30rpx;
					background: url('../../static/jishi/choose.png')no-repeat;
					background-size: 100% 100%;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					padding-left: 17rpx;
					line-height: 30rpx;
				}
			}
		}
	
		.right-show {
			position: absolute;
			left: 221rpx;
			top: 28rpx;
			right: 24rpx;
			.fixed-loc {
				position: absolute;
				right: 0;
				display: flex;
				align-items: baseline;
				height: 30rpx;
				background: #F3F3F3;
				border-radius: 150rpx;
				padding: 0 14rpx;
				justify-content: center;
				align-items: center;
				line-height: 30rpx;
				view {
					font-size: $uni-font-size-sm;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #0F0807;
				}
	
				image {
					width: 14rpx;
					height: 18rpx;
					margin-right: 6rpx;
				}
			}
	
			.username {
				font-size: 30rpx;
				font-weight: 400;
				color: #0F0807;
	
				text {
					font-size: $uni-font-size-sm;
				}
			}
			.shop-lines{
				display: flex;
				align-items: baseline;
				color: #888889;
				font-size: 24rpx;
				margin-top: 10rpx;
				view{
					margin-left: 8rpx;
				}
			}
			.start-nums {
				display: flex;
				align-items: baseline;
	
				.start-show {
					margin-right: 42rpx;
	
					image {
						width: 19rpx;
						height: 18rpx;
					}
				}
	
				.pingjia-nums {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					margin-left: 42rpx;
					text {
						font-size: $uni-font-size-base;
						font-weight: 400;
						color: #888889;
						margin-right: 10rpx;
					}
				}
			}
			//	
			.technician-datum-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 10rpx;
				flex-grow: 1;
				justify-content: space-between;
				
				.item-datum {
					display: flex;
					align-items: center;
					flex-basis: 33%;
					margin-bottom: 20rpx;
					flex: 0 0 33%;
					.titles {
						font-size: $uni-font-size-base;
						font-weight: 400;
						color: #888889;
						margin-right: 8rpx;
						flex: 0 0 auto;
	
					}
					.desc {
						font-size: $uni-font-size-base;
						font-weight: 400;
						color: #0F0807;
						max-width: 100rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						flex: 0 0 auto;
					}
				}
				.item-datum:last-child {
				  margin-right: auto;
				}
			}
	
			.brief-introduction {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #0F0807;
				// margin-top: 20rpx;
				overflow: hidden;
				display: -webkit-box;//设置块元素为伸缩布局
				-webkit-box-orient: vertical;//设置伸缩项的布局方向
				-webkit-line-clamp: 2;//设置文本行数
			}
		}
	}
</style>